<template>
  <div>
    <!-- 表 -->
    <DynamicParams ref="roomParams" :data="data" @check="showDetails" :operation="operation()" @modify="modify">
      <el-table-column label="房型名称" prop="roomName" align="center" />
      <el-table-column label="可住人数" prop="peopleNum" align="center" />
    </DynamicParams>
    <!-- 弹窗 -->
    <el-drawer custom-class="base_drawer add_room_layout" v-model="drawer" :close-on-click-modal="false" title="设置库存"
      :with-header="true" :size="1000">
      <HotelStockPrice ref="hotelPriceRef" />
      <template #footer>
        <div>
          <el-button @click="drawer = false">取消</el-button>
          <!-- <el-button type="primary" @click="save" v-if="!readOnly">保存</el-button> -->
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, watch, nextTick } from "vue";
import HotelStockPrice from "./roomPrice/HotelStockPrice.vue"
import DynamicParams from "@com/DynamicParams.vue";
import $ from "@util/base";
import { $msg } from "@ui/msg";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  readOnly: { type: Boolean, default: false },
});

const data = ref([]);
const roomParams = ref(null);
const hotelPriceRef = ref(null)
const drawer = ref(false);

watch(() => props.data, val => {
  data.value = val
})

watch(
  () => drawer.value,
  () => {
    if (drawer.value == false) {
      hotelPriceRef.value.reset();
    }
  }
);

function operation() {
  return {
    copy: false,
    move: false,
    modify: false,
    del: false,
    add: false,
    check: true,
  }
}

function open() {
  drawer.value = true;
}
function close() {
  drawer.value = false;
}
function save() {
  hotelPriceRef.value.save((res) => {
    if (res != false) {
      console.log(res);
      if (modifyIndex != null) {
        roomParams.value.modifyData(modifyIndex, res);
      } else {
        roomParams.value.addData(res);
      }

      close();
    }
  });
}

var modifyIndex = null;

function showDetails(index) {
  modifyIndex = null;
  open();
  nextTick(() => {
    hotelPriceRef.value.improtData(roomParams.value.getValue()[index]);
  })
}
function modify(index) {
  modifyIndex = index;
  open();
  nextTick(() => {
    hotelPriceRef.value.improtData(roomParams.value.getValue()[index]);
  })
}

function getValue() {
  let value = roomParams.value.getValue();
  if (value.length <= 0) {
    $msg.error("请添加房型");
    return false;
  }
  return value;
}
defineExpose({ getValue });
</script>
<style lang="scss">
// .add_room_layout {
//   .el-drawer__body {
//     padding: 0px;
//   }

//   .base_details_tabs {
//     border-top: 1px solid #dcdfe6 !important;
//   }
// }
</style>
<style lang="scss" scoped>
.el-checkbox {
  margin-right: 0 !important;
  display: block !important;
}

.number_layout {
  width: 80px;
}

::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}

.picker {
  width: 50px;
}
</style>
<style lang="scss">
.small_date_picker {

  .el-date-editor.el-input,
  .el-date-editor.el-input__wrapper {
    width: 250px !important;
  }
}
</style>